<template>



  <div style="width: 500px">
    <el-table
        :data="[{dataitems:[{name:'777',value:'9999'}],title:'标题'}]"
        style="width: 100%" >

      <el-table-column type="expand" style="width: 500px">
          <template slot-scope="props">
            <div>{{props.row.title}}</div>
            <el-table
                border
                :data="props.row.dataitems"
                >
              <el-table-column label="名称" align="center" prop="name" />
              <el-table-column label="值" align="center" prop="value" />
            </el-table>
          </template>
      </el-table-column>

    </el-table>






    <el-table
    :data="tableDataSum"
    type="selection"
    show-summary
    :summary-method="getSummaries">
      <el-table-column
          :selectable="selectable"
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column align="center" label="姓名" prop="name" />
      <el-table-column align="center" label="篮球" prop="basketball" />
      <el-table-column align="center" label="足球" prop="football"/>
    </el-table>



    <div style="padding: 10px"></div>

    <el-form ref="formData" :model="formData">
      <el-table
          :data="formData.tableData"
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
        <el-table-column prop="type"
                         label="分类">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
        >
          <template slot-scope="scope">
            <el-form-item :prop="isAddValid?'tableData.' + scope.$index + '.date':''" :rules="rules.date">
              <el-input v-model="scope.row.date" placeholder="请输入"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
        >
          <template slot-scope="scope">
            <el-form-item :prop="isAddValid?'tableData.' + scope.$index + '.name':''" :rules="rules.name">
              <el-input v-model="scope.row.name" placeholder="请输入"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
          <template slot-scope="scope">
            <el-form-item :prop="isAddValid?'tableData.' + scope.$index + '.address':''" :rules="rules.address">
              <el-input v-model="scope.row.address" placeholder="请输入"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-row style="margin-top: 10px">
      <el-button @click="rebuildTableData">重组表格</el-button>
      <el-button @click="save">保存</el-button>
      <el-button @click="testFun">测试</el-button>
      <el-button @click="testFun1({a:'1'},{b:'2'},{c:'3'})">测试对象前面...</el-button>
    </el-row>

    <p style="padding: 10px">合并单元格</p>
    <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :show-header=false
        :header-row-style="{ height: '40px', color: '#1F1F1F'}"
    >
      <el-table-column align="center" width="100" prop="type"></el-table-column>
      <el-table-column align="center" label="分类" prop="typeValueName" />
      <el-table-column align="center" label="合计" prop="sum">
      </el-table-column>
    </el-table>
    <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :show-header=false
        :header-row-style="{ height: '40px', color: '#1F1F1F'}"
    >
      <el-table-column align="center" width="100" prop="type"></el-table-column>
      <el-table-column align="center" label="分类" prop="typeValueName" />
      <el-table-column align="center" label="合计" prop="sum">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'elementui-table',
  components: {},
  data() {
    return {
      isAddValid:true,
      formData: {
        tableData: [
          // {name:'小明',date:'2021-02-01',address: '桃园路1'},
          // {name:'小红',date:'2021-02-02',address: '桃园路2'},
          // {name:'小青',date:'2021-02-03',address: '桃园路3'},
        ]
      },
      rules: {
        date: [
          {required: true, message: '请输入', trigger: 'blur'},
        ], name: [
          {required: true, message: '请输入', trigger: 'blur'},
        ], address: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],
      },
      testData: {
        current: [],
        before: [
          {id: "1", date: '1', name: '1', address: "1", typeId: '1'},
          {id: "2", date: '2', name: '2', address: "2", typeId: '2'},
          {id: "3", date: '3', name: '3', address: "3", typeId: '3'},
        ]
      },
      tableData:[
        {
          type:'按重要程度',
          typeValueName:'A级',
          sum:undefined
        },
        {
          type:'按重要程度',
          typeValueName:'B级',
          sum:'102'
        },
        {
          type:'按重要程度',
          typeValueName:'C级',
          sum:'103'
        },
        {
          type:'按区域',
          typeValueName:'国内',
          sum:'300'
        },
        {
          type:'按区域',
          typeValueName:'国外',
          sum:'301'
        }, {
          type:'按专业',
          typeValueName:'油气田地面工程',
          sum:'301'
        }, {
          type:'按专业',
          typeValueName:'油气储运工程',
          sum:'301'
        }, {
          type:'按专业',
          typeValueName:'炼化工程',
          sum:'301'
        }, {
          type:'按专业',
          typeValueName:'LNG工程',
          sum:'301'
        }, {
          type:'按专业',
          typeValueName:'环保工程',
          sum:'301'
        }, {
          type:'按专业',
          typeValueName:'三新工程',
          sum:'301'
        }, {
          type:'按专业',
          typeValueName:'项目管理及其他工程',
          sum:'301'
        }
      ],
      tableDataSum:[
        {"name":'小明',"basketball":10,"football":100},
        {"name":'小洪',"basketball":10,"football":100},
        {"name":'小史',"basketball":10,"football":100},
        {"name":'小文',"basketball":10,"football":100},
      ]
    }
  },
  watch: {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //console.log("rowIndex,columnIndex",rowIndex,columnIndex)
      if (columnIndex == 0){

        if (
            rowIndex > 0 &&
            this.tableData[rowIndex].type ==
            this.tableData[rowIndex - 1].type
        ) {
          return {
            rowspan: 0,
            colspan:0,
          };
        } else {
          let j = 0;
          for (let i = rowIndex; i < this.tableData.length; i++) {
            if (
                this.tableData[rowIndex].type == this.tableData[i].type
            ) {
              j++;
            } else {
              break;
            }
          }
          return {
            rowspan: j,
            colspan: 1,
          };
        }
          // let j = 0;
          // for (let i = rowIndex; i < this.tableData.length; i++) {
          //   if (
          //       this.tableData[rowIndex].type == this.tableData[i].type
          //   ) {
          //     j++;
          //   } else {
          //     break;
          //   }
          // }
          // return {
          //   rowspan: j,
          //   colspan: 1,
          // };
      }
    },
    rebuildTableData() {
      let res = [
        {typeId: '1', typeText: '专业1'},
        {typeId: '2', typeText: '专业2'},
        {typeId: '3', typeText: '专业3'},
      ];
      res.map(item => {
        this.formData.tableData.push({
          type: item.typeText
        })
      });
      console.log("this.formData.tableData", this.formData.tableData)
    },
    save(){
      this.isAddValid = true ;
      this.$refs.formData.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      console.log("保存的数据,",this.formData.tableData)
    },
    testFun(){
      let res = [
        {typeId: '1', typeText: '专业1'},
        {typeId: '2', typeText: '专业2'},
        {typeId: '3', typeText: '专业3'},
      ];
      res.forEach(item => {
        this.formData.tableData.push({
          type: item.typeText,
          typeId:item.typeId,
          date: '',
          name: '',
          address: "",
        })
      });

      this.formData.tableData.map((item)=>{
        item.old = this.testData.before.filter(
            (x) => item.typeId == x.id
        )[0]
      });

      console.log("this.formData.tableData",this.formData.tableData)
      console.log(undefined ? "2" : 0) //0
      console.log("" ? "2" : 0) //0
      console.log(0 ? "2" : 0)//0
      console.log(null ? "2" : 0)//
      console.log("1" ? "2" : 0)//2
      let obj = {name:'2',age:'3'}
      console.log(obj.age1)

      if (!undefined){
        console.log("!undefined 为 true 进来了")
      }
      if (!null){
        console.log("!null 为 true 进来了")
      }
      if (!0){
        console.log("!0 为 true 进来了")
      }
      if (!NaN){
        console.log("!NaN 为 true 进来了")
      }
      console.log("Number('02') Number('002') Number('002r')",Number('02'),Number('002'),Number('002r'))


    },
    testFun1(...x){
      console.log("...arguments:",...arguments) ;
      let obj = Object.assign({},[{"depId":'9988'},{"company":'公司'}]) ;
      console.log("********",obj) ;
      console.log("遍历出来",{...obj})
      //console.log("...Object.assign({},{depId:'9988'})",...Object.assign({},{"depId":'9988'}))
     // let arr = [{a:'1'},{b:'2'},{'c':3}]
      //console.log(...arr)

      //三个点深拷贝对象
      let aAbj = {'a':1,'b':2} ;
      let bAbj = {...aAbj}
      bAbj.a = 3 ;
      console.log("aAbj:",aAbj) ;
      console.log("bAbj:",bAbj) ;

      //
      let dObj = {"a":'1',"b":'2'}
      let eObj = {"a":'4',"c":'3'}
     console.log("****** Object.assign({},dObj,eObj)*****:", Object.assign({},dObj,eObj)) //{a: "1", b: "2", c: "3"}
      console.log("dObj",dObj) //{"a":'1',"b":'2'} Object.assign 第一个参数是{}，不改变目标对象的属性

      let fObj = {"a":'1',"b":'2'}
      let gObj = {"a":'4',"c":'3'}
      console.log("****** Object.assign({},fObj,gObj)*****:", Object.assign(fObj,gObj)) //{a: "1", b: "2", c: "3"}
      console.log("fObj",fObj) //{a: "1", b: "2", c: "3"} Object.assign 第一个参数不是{}，改变目标对象的属性

      console.log("[...fObj]", {...fObj})

    },

    selectable(row,index) {
        console.log("row:",row)
        return false;
    },
    getSummaries(param) {
      console.log("param:",param)
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    //讲数组中的null转成nudefined,解决<el-input-number>初始值为0的问题。
    nullToUndef(arr) {
      if (!arr || arr.length < 1) return;
      arr.forEach((f) => {
        for (let o in f) {
          f[o] = f[o] === null ? undefined : f[o];
        }
      });
    },
  },


};
</script>

<style lang="less">
.cell-style-self.el-table td,
.cell-style-self.el-table td,
.cell-style-self.el-table td .cell {
  padding-right: 0;
  padding-left: 0;

}

/*.progress-img /deep/.el-table .cell{padding-right: 0px!important;padding-left: 0!important;}*/
.progress {
  display: inline-block;
  background: #C5E9F9;
  height: 80%
}

.clearPadding {
  padding-right: 0px !important;
  padding-left: 0 !important;
}

//.el-table td.el-table__cell div {padding-right: 0px!important;padding-left: 0!important;}
.progress-blue {
  background: #C5E9F9
}
</style>